<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>专业量表测试</title>
  <script src="/validation/lib/prototype.js" type="text/javascript"></script>
  <script src="/validation/lib/effects.js" type="text/javascript"></script>
  <script src="/validation/validation_cn.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="/validation/styles/style_min.css" />
  <style>
*{ border:0; margin:0; padding:0;}
img{ border:none;}
li{ list-style:none;}
a{ color:#000000; text-decoration:none;}
a:hover{ color:#FF0000; text-decoration:none;}
h1,h2,h3,h4,h5,h6{ font-family:"宋体",Arial; font-size:12px; font-weight:normal;}
body{ font-family:"宋体",Arial; font-size:12px; background:#ece9d8;}

.container{ width:708px; margin:0 auto; margin-top:8px;}
.header{ width:708px; height:40px; float:left; overflow:hidden;}
.buttom{ width:708px; height:40px; float:left;}
.main{ width:708px; float:left; background:url(/images/user/paper_style/bgg_03.jpg) ; background-repeat:repeat-y}
.top{ width:680px; height:52px; float:left; margin-left:15px; display:inline; background:url(/images/user/prof_surveys/top-bg03.jpg) repeat-x;  line-height:52px;}
  #main_right{width:610px; float:left; padding-left:50px; margin-top:10px;}
  #head{width:820px; height:88px; float:left}
  #logo{width:220px; height:78px;float:left; margin-top:10px; margin-left:5px;}
  #head_text{width:200px; float:left; height:20px; line-height:20px; margin-top:48px; color:#fff;}

  #content-top{width:610px}
  #speed{width:460px; height:30px;  float:left; margin-left:10px; display:inline;}
	.speed2{ margin-top:7px; float:left; padding-left:15px;}
  #clock{float:left;width:100px;margin: -30px 0 0 30px;}
  #test-title{float:left;}

  .part-div{width:550px;float:left;}
  #username-div{width:550px;float:left; margin-left:20px}
  /*圆角*/
  #jiao1{height:1px;border-top:0;border-bottom:0;border-left:solid 3px #5aa6c2;border-right:solid 3px #5aa6c2;overflow:hidden;}
  #jiao2{height:1px;border-top:0;border-bottom:0;border-left:solid 2px #5aa6c2;border-right:solid 2px #5aa6c2;overflow:hidden;}
  #jiao3{height:1px;border-top:0;border-bottom:0;border-left:solid 1px #5aa6c2;border-right:solid 1px #5aa6c2;overflow:hidden;}
  /*圆角end*/
  #centent{width:610px; margin:0 auto;}

  /*测试选项CSS*/
  .page{width:610px; border:0px solid #b9d4e2; margin:0 auto; margin-top:10px;}
  .cs_table_1211{margin-bottom:10px; border-bottom:2px solid #b9d4e2;}
  .cs_title_1211{background-color:#f3faff; height:24px; border-left:4px solid #FFFFFF;border-right:4px solid #FFFFFF; padding-left:10px;}
  .cs_daan_1211{height:40px; line-height:40px; padding-right:20px; text-align:left;}
</style>
    <script language="javascript">
var CallTimeLen = "0";
var timer1 = null;

function DoCallTimer()
{ 
  var minute="0";
     var second="0";
  CallTimeLen = parseInt(CallTimeLen)+1;
  hour=parseInt(CallTimeLen/3600)
  minute = parseInt((CallTimeLen-(hour*3600))/60);
  second = CallTimeLen%60;
  if(minute=="0" &&hour=="0")
  {
   document.getElementById("timer").value =second+"秒";
  }
  else if (hour=='0')
  {
   document.getElementById("timer").value =minute+"分"+second+"秒";
  }else
  {
  document.getElementById("timer").value =hour+"小时"+minute+"分"+second+"秒";
  }
  window.timer1 = window.setTimeout("DoCallTimer()",1000);
}
function stop()
{
 clearTimeout(window.timer1);
}
function settime(){
var now= new Date();
var month=now.getMonth()+1;
var day=now.getDate();
var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
document.getElementById("start_time").value=month+"月"+day+"日 "+hour+":"+minute+":"+second
}

</script>
</head>

<body onkeydown="KeyDown();">

<div class="container">
	<div class="header">
	<img src="/images/user/prof_surveys/top_03.jpg" width="708" height="40" />
	</div>
	<div class="main">
          
  	<div class="top">
         <span style="width:398px; height:35px; margin-bottom:18px; float:left; display:inline;
  	     text-align:left;text-align:top; font-size:20px;margin:-10px 0 0 10px; ">
  	  <b><%= @test.name %></b>
  	  </span>
  	   <span style="margin-top:12px; float:right; display:inline;
  	     text-align:right; font-size:12px;">
            <%=current_user.name%>
  	  </span>

        </div>
		<div id="main_right">
					<div id="centent">

							<div id="cent_top">
							</div>
								<div id="cent_test">
<div class="page">

<!---------------form---------------> 
<% form_for(:test, :url => { :action => "prof_result" },
    :html => {:name=>'testQuestionForm', :id=>'testQuestionForm', :class=>"required-validate", :onsubmit => "return checkSelect(#{@test.parts.size}, 1)"}) do |f|%>

  <% if current_user.tested?(Survey.find(@test.id)) %>
    <input type="hidden" name="retest" value="yes"/>
  <% end %>
  <input type="hidden" name="test_id" value="<%=@test.id%>"/>

  <div id="content-top" style="display:none">
    <div id="speed">
      <div id="speed2">
        测试开始时间：<input type="text" name="start_time" id="start_time" size="15" readonly/>
        测试已用时&nbsp;：<input type="text" name="timer" id="timer" size="10" readonly>
      </div>
    </div>
    
    <!--div id="clock">
      <object codeBase="http://download.macromedia.com/pub/shockwave/cabs/flash/&#13;&#10;swflash.cab#version=6,0,29,0"
                height="100" width="100" >
        <PARAM NAME="movie" VALUE="/swfs/clock1.swf"/>
        <PARAM NAME="quality" VALUE="high"/>
        <PARAM NAME="wmode" VALUE="opaque"/>
        <embed src="/swfs/clock1.swf" width="100px" height="100px" quality="high"
               pluginspage="http://www.macromedia.com/go/getflashplayer"
               type="application/x-shockwave-flash" wmode="opaque"></embed>
       </object>
     </div-->
     
   </div>
    <div id="username-div" style="margin-left : 20px;margin-right : 10px ;margin-top :10px ;">
    <div id="message" style="display: none;">

      <font color="#FD0240"><span>请填写测试者年龄和职业信息：</span></font></div><br />
       姓&nbsp;&nbsp;&nbsp;&nbsp;名：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <input type="text" id="username"name="username"
            size="15" value=""  style="height:18px; border:1px solid #a5acb2;"/>(不填为匿名)<br /><br />
       年&nbsp;&nbsp;&nbsp;&nbsp;龄：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <input type="text"id="age" name="age"
            class="validate-integer" value=""size="6"  style="height:18px; border:1px solid #a5acb2;"/><br /><br />
       性&nbsp;&nbsp;&nbsp;&nbsp;别：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <span style="border:1px solid #a5acb2; height:20px;position:absolute; overflow:hidden;float:left; margin:-5px 0 0 0;">
          <select name="gender" id="gender" class="" style="margin:-1px;">
                           <option value="男">男&nbsp;&nbsp;&nbsp;  </option>
                           <option value="女">女&nbsp;&nbsp;&nbsp;  </option>
          </select>
       </span><br/><br />

       职&nbsp;&nbsp;&nbsp;&nbsp;业：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       <input type="text" id="perfession" class=""
            name="perfession" size="15" value="" style="height:18px; border:1px solid #a5acb2;"/><br/><br />
       教育程度：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

       <span style="border:1px solid #a5acb2; height:20px;position:absolute; overflow:hidden;float:left; margin:-5px 0 0 0;">
         <select name="edu_status" id="edu_status"   class="" style="margin:-1px;">
                           <option value="硕士">硕士</option>
                           <option value="本科">本科</option>
                           <option value="专科">专科</option>
                           <option value="大专">大专</option>
                           <option value="高中">高中</option>
                           <option value="高中以下">高中以下</option>
         </select>
       </span><br/><br />
          <a href="#" onclick="check()">
          <img src="/images/user/prof_surveys/kaishiceshi.jpg" width="80" height="26" />
       </a>
          <script>
          function check(){
           if (!(document.getElementById("age").value == "")&&!(document.getElementById("perfession").value == ""))
             {
            Element.show('part0');Element.show('content-top');Element.hide('username-div');settime();DoCallTimer();
             }else{
             Element.show('message');
             }
          }
          </script>
    </div>
    
  <div id="part0"class="part-div" style="margin:10px 0 10px 10px ;display :none">
  <%= hidden_field_tag "test_id", @test.id %>
  <b>指导语：</b><div id="user_guide" style="margin-left:10px;margin-top:10px;">
    <span>
   <%=@test.user_guide%>
    </span>
  </div><br/>
  <% i = 0 %>

  <% Question.find(:all, :conditions => "survey_id = #{@test.id}", :include => :choices).each do |question| %>
    <% i += 1 %>
    <%= hidden_field_tag "question_id[]", question.id %>
    <input id="question<%=question.id%>" name="question<%=question.id%>[value]"
           class="question-value" type="hidden" value="null"/>
    <input id="question-choice<%=question.id%>" name="question<%=question.id%>[choice]"
             class="question-value" type="hidden" value="null"/>


    <table width="90%" border="0" cellpadding="13" cellspacing="0">
        <tbody><tr>
            <td class="cs_title_1211" align="left">
            <a name="position_6287">
            	<%= i %> .
            	<%= question.description %>
            </a>
            </td>
        </tr>
        <tr>
            <td align="center">
            <table width="96%" border="0" cellpadding="13" cellspacing="0">

                <tbody>
                  <% choice_count=0%>
                <% question.choices.each do |c| %>
                <tr style="cursor: pointer;" onmousemove="this.bgColor='#F4F4F4'" onmouseout="this.bgColor=''" bgcolor="">
                <td width="18px"><%=(65+choice_count).chr %> :</td>
                    <td class="cs_daan_1211" onclick="nextItem(<%=question.id%>,<%=c.id%>,3,24,<%=(65+choice_count) %>);" width="20">
                      <input id="answervalue_<%=c.id%>" name="itemanswers_<%= question.id%>" value="<%=c.value%>" type="hidden">
                      <img src="/images/user/test/chooseblue.gif" id="<%=c.id %>" alt=""/>
                    </td>
                    <td class="cs_daan_1211" onclick="nextItem(<%=question.id%>,<%=c.id %>,3,24,<%=(65+choice_count) %>);">
                      <%= c.content %>
                    </td>
                </tr>
                <% choice_count +=1%>
                <% end %>

            </tbody></table>
            </td>
        </tr>
    </tbody></table>

  <% end %>

    
  <div class="top10"  style="margin:0 0 20px 0;">
    <div>
       <a href="#" onclick="checkSelect();">
              <img src="/images/user/prof_surveys/wancheng_07.jpg" width="60" height="26" />
            </a>
      </div>

</div><!--part结束-->

<% end %><!--form结束-->
  <br/>
</div><!--page-->
</div><!--cent_test-->

<script type="text/javascript">

 //检查有没有漏选的题
  function checkSelect() {
    var objs = document.getElementsByClassName("question-value", "testQuestionForm");
    if(objs.length == 0) {
      alert("您的题还没有做完。");
      return false;
    }
    for(var i=0; i<objs.length; i++) {
      if(objs[i].value == "null") {
        alert("您的题还没有做完。");
        return false;
      }
    }

      $("testQuestionForm").submit();
  }
  
  //显示下一个子量表的题目

  function nextItem(question_id,imgId,itemPosition,itemCount,choiceNumber){
    if(imgId==0)return false;
    var answerObj = document.getElementById(imgId);
    var answer = $("question"+question_id);
    var choice_num = $("question-choice"+question_id);
    var value = document.getElementById("answervalue_"+answerObj.id).value;
    //给选择的答案赋值
    answer.value = value;
    choice_num.value=choiceNumber;
    //取消原来选中的
    var answerObjs = document.forms["testQuestionForm"].elements["itemanswers_"+question_id];
    for(var i=0;i<answerObjs.length;i++){
            var id = answerObjs[i].id;
            id= id.substring(id.indexOf("_")+1);
            document.getElementById(id).src="/images/user/test/chooseblue.gif";
    }

    //换图片
    answerObj.src="/images/user/test/chooseblue2.gif";
    tmpAnswer = answerObj;

  }

</script>
<script>
//屏蔽鼠标右键、Ctrl+R、shift+F10、F5刷新、退格键
/**
* 屏蔽按键刷新
*/
function KeyDown(){
    if ((window.event.altKey)&&((window.event.keyCode==37)||(window.event.keyCode==39))){
    alert("不准你使用ALT+方向键前进或后退网页！");
    event.returnValue=false;
    }

    if (event.keyCode==116){ //屏蔽 F5 刷新键
        alert("禁止F5刷新网页！");
        event.keyCode=0;
        event.returnValue=false;
    }

    if ((event.ctrlKey)&&(event.keyCode==82)){ //屏蔽 Ctrl+R
        alert("禁止Ctrl+R刷新网页！");
        event.returnValue=false;
    }

    if ((event.shiftKey)&&(event.keyCode==121)){ //屏蔽 shift+F10
        alert("禁止shift+F10刷新网页！");
        event.returnValue=false;
    }
}

</script>
									</div><!--right-->
					</div><!--main-->
		</div>
</div>
      <div class="buttom">
        <img src="/images/user/paper_style/down.jpg" width="708" height="40" alt=""/>
      </div>
</body>
</html>






